import { Button, Table } from 'antd';
import { useState, useEffect } from 'react'
import CztApi from '../../../../../../../../utils/apis/CztApi';
import { fromCircle } from 'ol/geom/Polygon';
import useMap from '../../../hooks/useMap';
import DataDetail from '../../DataDetail';
export default function DetailList(props) {
    const { type, cztxl, jzzyxl, wkt, yhlx } = props;
    const [data, setData] = useState();

    const map = useMap();

    useEffect(() => {
        if (type === 'czt') {
            CztApi.cztxq(cztxl, wkt).then(resp => {
                setData(resp.data);
            })
        } else if (type === 'jzzy') {
            CztApi.jzzyxq(jzzyxl, wkt).then(resp => {
                setData(resp.data);
            })
        } else if (type === 'yh') {
            CztApi.zzfxxq(yhlx, wkt).then(resp => {
                setData(resp.data)
            })
        }

    }, [cztxl, jzzyxl, wkt, type, yhlx])
    return <Table bordered size='middle' style={{ marginTop: 10 }}
        columns={[{
            title: '名称',
            render: (t, r) => {
                return r.title || r.yhmc
            }
        }, {
            width: 80,
            render: (text, record) => {
                return <Button size="small" type="link" onClick={() => {
                    map.dispatchEvent({
                        type: 'detail.show3',
                        title: record.title,
                        component: <DataDetail cztxl={cztxl} jzzyxl={jzzyxl} item={record} yhlx={yhlx} />
                    })
                }}>详情</Button>
            }
        }

        ]}
        dataSource={data} />;
}